<template>
  <text class="btn" v-if="isButton" @click="toPriview">换车合同</text>
  <view class="pre-file" v-else>
    <view class="light" v-if="id" @click="toPriview"> {{ file.originalFileName }} </view>
    <view v-else>暂无数据</view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { getFileSingle } from '@/api/common'

  const props = defineProps({
    id: [String, Number],
    isButton: Boolean,
  })

  const file = ref({})
  onMounted(() => {
    const id = props.id
    getFileSingle({ id }).then((res) => {
      if (res.code == 200) {
        file.value = res.result
      }
    })
  })

  const toPriview = () => {
    if (!file.value.openUrl) return
    if (file.value.fileType == 'FILE') {
      uni.showLoading()
      uni.downloadFile({
        url: file.value.openUrl,
        success: (res) => {
          uni.hideLoading({ title: '加载中' })
          var filePath = res.tempFilePath
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
          })
        },
      })
      return
    }
    uni.previewImage({ urls: [file.value.openUrl] })
  }
</script>

<style lang="less" scoped>
  .pre-file {
    font-size: 30rpx;
    font-weight: 400;
    color: #9ea5bb;
    line-height: 44rpx;
    & .light {
      word-break: break-all;
      color: #1890ff;
      text-decoration: underline;
      // border-bottom: 1px solid;
    }
  }
  .pre-btn {
    flex-shrink: 0;
    margin-left: 12rpx;
    border-radius: 4rpx;
    border: 1px solid #3072f6;
    font-size: 24rpx;
    font-weight: 400;
    color: #3072f6;
    line-height: 44rpx;
    padding: 0 16rpx;
  }
</style>
